<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>DApp Demo</title>

    <link rel="stylesheet" type="text/css" href="main.css">
    <script src="https://cdn.jsdelivr.net/gh/ethereum/web3.js/dist/web3.min.js"></script>

</head>
<body>
    <div class="container">

        <h1> web3 update info Demo</h1>

        <h2 id="info"></h2>

        姓名：
        <input id="name" type="text"> <br/>

        年龄：
        <input id="age" type="text">

        <button id="button">提交</button>


    </div>

    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>

    <script>

       if (typeof web3 !== 'undefined') {
            web3 = new Web3(web3.currentProvider);
        } else {
            web3 = new Web3(new Web3.providers.HttpProvider("HTTP://127.0.0.1:7545"));
        }
        web3.eth.defaultAccount = web3.eth.accounts[0];
//设置ABI
        var infoContract = web3.eth.contract([
	{
		"constant": false,
		"inputs": [
			{
				"name": "_fName",
				"type": "string"
			},
			{
				"name": "_age",
				"type": "uint256"
			}
		],
		"name": "setInfo",
		"outputs": [],
		"payable": false,
		"stateMutability": "nonpayable",
		"type": "function"
	},
	{
		"constant": true,
		"inputs": [],
		"name": "getInfo",
		"outputs": [
			{
				"name": "",
				"type": "string"
			},
			{
				"name": "",
				"type": "uint256"
			}
		],
		"payable": false,
		"stateMutability": "view",
		"type": "function"
	}
]);
   //设置合约地址
        var userInfo = infoContract.at('0x0a38240efda61f04ed262bd71cacbc0eff452ef9');

        userInfo.getInfo(function(error, result){
            if(!error)
                {
                    $("#info").html('姓名：'+result[0]+'  ， 年龄: '+result[1]+'');
                    console.log(result);
                }
            else
                console.error(error);
        });

        $("#button").click(function() {
            userInfo.setInfo($("#name").val(), $("#age").val(), function(error, result){
              if(!error){
                alert("信息已提交，请刷新页面！")
              }
             });

        });

    </script>

</body>
</html>
